import { Input } from 'gantd';
import _ from 'lodash';
import { selectRowsMock } from './mock';
import styles from './index.less';

// 按 department 字段分组
const groupedByDepartment = _.groupBy(selectRowsMock, 'productCode.projectCode');

const finallData = Object.entries(groupedByDepartment).map(([key, value]) => ({
  key: key,
  value: value,
}));

const exportData = Object.entries(groupedByDepartment).map(([key, value]) => {
  const parentData = selectRowsMock.find((item) => item?.productCode?.projectCode === key);
  return {
    key: `${parentData?.productCode?.projectNo}/${parentData?.productCode?.projectCode}`,
    value: value.map((item) => item.id),
  };
});

const finallExportParams = {};
exportData.forEach((item) => {
  finallExportParams[item.key] = item.value;
});

const Dashboard = () => {
  return (
    <div className={styles.card}>
      {finallData.map((item) => {
        return (
          <div key={item.key} className={styles.item}>
            <span className={styles.title}>{item.key}:</span>
            <div className={styles.content}>
              {item.value.map((itemT, indexT) => (
                <span key={itemT.id} className={styles.name}>
                  &lt;{indexT}&gt;{itemT.trailRoomNo}({itemT.trialBomName});
                </span>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default Dashboard;
